<template>
  <div class="container">
    <van-tabs v-model="active" @click="tab">
      <van-tab v-for="item,index in navs" :title="item" :key="index">
        <div class="list pd bg-white">
          <div class="item flex bg-white mg-t weishiyong" v-for="i in 2" :style="style">
            <img src="@/assets/images/img/img-coupon-status-icon-1.png" v-if="active==1">
            <img src="@/assets/images/img/img-coupon-status-icon-2.png" v-if="active==2">
            <div class="flex-col flex-y-center flex-x-center head flex-grow-0">
              <div class="money">30.00</div>
              <div>满300元可用</div>
            </div>
            <div class="flex-col flex-x-center flex-grow-1 mg-l">
              <div class="title">领劵中心</div>
              <div class="subtit">2018.05.20 ~ 2018.06.20</div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default ({
  data() {
    return {
      active: 0,
      navs: ["未使用", "已使用", "已过期"],
      style: {
        backgroundImage: "url(" + require("@/assets/images/img/img-coupon-bg-0.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100%",
        backgroundSize: "100%",
        marginTop: "5px",
        height: "4rem",
        width: "100%"
      }
    }
  },
  methods: {
    detail() {
      this.$router.push({ name: 'tuikuanshouhou', params: { id: 2 } })
    },
    tab(index, title) {
      if (index != 0) {
        this.style = {
          backgroundImage: "url(" + require("@/assets/images/img/img-coupon-bg-1.png") + ")",
          backgroundRepeat: "no-repeat",
          backgroundSize: "100%",
          backgroundSize: "100%",
          marginTop: "5px",
          height: "4rem",
          width: "100%"
        }
      } else {
        this.style = {
          backgroundImage: "url(" + require("@/assets/images/img/img-coupon-bg-0.png") + ")",
          backgroundRepeat: "no-repeat",
          backgroundSize: "100%",
          backgroundSize: "100%",
          marginTop: "5px",
          height: "4rem",
          width: "100%"
        }

      };

    }
  }
})

</script>
<style scoped lang="less">
.list {
  position: fixed;
  top: 44px;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: croll;
}

.van-tab--active {
  color: #F75B93;
}

.item {
  font-size: .5rem;
  position: relative;
  img {
    position: absolute;
    right: 0;
    top: 0;
    width: 4rem;
    height: 3rem;
  }
}

.van-tabs__line {
  background-color: #F75B93;
}

.btn-group {
  display: flex;
  justify-content: flex-end;
}

.van-button--small {
  font-size: .5rem;
  margin-left: .3rem;
}

.pd {
  padding: .3rem;
}

.pd-b {
  padding-bottom: .3rem;
}

.btn {
  color: #F75B93;
  border: 1px solid #F75B93;
}

.head {
  width: 30%;
  color: #fff;
  .money {
    font-size: 1rem;
  }
}

.title {
  font-size: 1rem;
  color: #333;
}

</style>
